<template>
	<div id="logon">
		<div class="content">
			<div class="top">
				<div class="left" @click="none = 1" :class="none==1?'on' : ''">
					<h4>账号登录</h4>
				</div>
				<div class="right" @click="none = 0" :class="none==0?'on' : ''">
					<h4>快速登录</h4>
				</div>
			</div>
			<div class="conter">
				<ul class="list_1" v-show="none == 1">
					<li>
						<img src="../../../assets/phone_1.png" alt="">
						<input type="text" placeholder="输入手机号码" v-model="obj.loginPhone">
					</li>
					<li>
						<img src="../../../assets/code_2.png" alt="">
						<input type="text" placeholder="输入登录密码" v-model="obj.loginPassword">
					</li>
					<li>
						<img src="../../../assets/code_2.png" alt="">
						<input type="text" placeholder="输入验证码" v-model="obj.loginCode">
						<div class="button" v-html="svgHtml" @click="getCodeHtml()"></div>
					</li>
					<li>
						<span>忘记密码</span>
					</li>
				</ul>
				<ul class="list_2" v-show="none == 0">
					<li>
						<img src="../../../assets/phone_1.png" alt="">
						<input type="text" placeholder="输入手机号码">
					</li>
					<li>
						<img src="../../../assets/code_2.png" alt="">
						<input type="text" placeholder="输入验证码" v-model="obj.loginCode">
						<div class="button" v-html="svgHtml" @click="getCodeHtml()"></div>
					</li>
				</ul>
			</div>
			<div class="bottom">
				<div class="li1">
					<label>
						<van-checkbox v-model="checked" checked-color="#ee0a24">
							<span>我已同意</span>
							<span>《用户协议》</span>
							<span>与</span>
							<span>《隐私政策》</span>
						</van-checkbox>
					</label>
				</div>
				<div class="li2">
					<button @click="submit()">登录</button>
				</div>
				<div class="li3">
					<p>没有账号？<router-link to="/login">立即注册</router-link>
					</p>
				</div>
				<div class="li4">
					<router-link to="/">随便逛逛</router-link>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	// <!-- 导入api文件 -->
	import {
		getCode,
		// 解构出来login
		login
	} from "@/api/user"

	export default {
		data() {
			return {
				// 用户协议
				checked: false,
				// 选项卡
				none: true,
				// svg图片
				svgHtml: '',
				// 验证码的字符
				code: '',
				// 注册需要提交的信息
				// 注册需要提交的信息
				obj: {
					// 登录用的手机号
					loginPhone: '',
					// 登录用的密码
					loginPassword: '',
					// 验证码
					loginCode: ''
				}
			}
		},
		created() {
			console.log("api");
			this.getCodeHtml()
		},
		methods: {
			getCodeHtml() {
				getCode({
						width: "90",
						height: "40"
					}).then(res => {
						this.svgHtml = res.data.data
						this.code = res.data.text
					})
					.catch(err => {
						console.error(err)
					})
			},
			// 登录方法
			submit() {
				// 打印要提交的数据
				// 验证手机号
				if (!/^(?:(?:\+|00)86)?1\d{10}$/.test(this.obj.loginPhone)) {
					// 使用view-ui-plus的全局提示方法  错误方法提示v
					this.$Message.error('手机号不合法')
					return
				}
				// 验证密码
				if (this.obj.loginPassword.length < 6) {
					this.$Message.error('手机号不合法')
					return
				}
				// 判断验证码
				if (this.code.toLowerCase() != this.obj.loginCode.toLowerCase()) {
					this.$Message.error('验证码输入错误')
					return
				}

				// 判断是否勾选用户协议
				if (!this.checked) {
					this.$Message.error('请勾选用户协议');
					return
				}
				// 请求登录方法
				login(this.obj).then(res => {
					// 如果code == 1 证明登录成功
					if (res.data.code == 1) {
						// 先把token存在本地
						localStorage.setItem('token', res.data.result.token)
						// 提示信息
						this.$Message.success(res.data.msg)
						// 跳转到登录页面
						this.$router.push({
							path: '/user'
						})
					} else {
						// 提示信息
						this.$Message.error(res.data.msg)
					}
				})
			}

		}
	}
</script>

<style lang="scss" scoped>
	// scss变量定义  尺寸比例
	$width:(100vw / 375);

	#logon {
		width: 100vw;
		height: 100vh;
		background-color: #e93323;
		overflow: hidden;

		.content {
			width: 84vw;
			margin: 100 * $width 8vw;
			background-color: #fff;
			border-radius: 15 * $width;
			box-sizing: border-box;
			padding: 20 * $width 15 * $width;

			.top {
				display: flex;
				justify-content: space-evenly;
				align-items: center;
				margin-top: 10 * $width;

				.left,
				.right {
					height: 26 * $width;
					padding-bottom: 2 * $width;
					box-sizing: border-box;

					h4 {
						font-size: 18 * $width;
						color: #9b9a99;
						line-height: 1;
						margin: 0;
					}


				}

				.on {
					border-bottom: 3 * $width solid #f00;

					h4 {
						color: #000;
					}
				}
			}

			.conter {
				margin-top: 20 * $width;

				.list_1,
				.list_2 {
					li {
						height: 44 * $width;
						display: flex;
						align-items: center;
						border-bottom: 1 * $width solid #e5e5e5;
						box-sizing: border-box;

						img {
							width: 22 * $width;
						}

						input {
							height: 100%;
							width: 280 * $width;
							border: none;
							box-sizing: border-box;
							padding-left: 10 * $width;
							outline: none;
							font-size: 16 * $width;
						}

						// 修改input placeholder样式
						input::-webkit-input-placeholder {
							/* WebKit, Blink, Edge */
							color: #cccccc;
						}

						input:-moz-placeholder {
							/* Mozilla Firefox 4 to 18 */
							color: #cccccc;
						}

						input::-moz-placeholder {
							/* Mozilla Firefox 19+ */
							color: #cccccc;
						}

						input:-ms-input-placeholder {
							/* Internet Explorer 10-11 */
							color: #cccccc;
						}

						// 修改input placeholder样式
					}
				}

				.list_1 {
					li:nth-of-type(3) {
						input {
							width: 170 * $width;
						}

						.button {
							width: 90 * $width;
							height: 40 * $width;
						}
					}

					li:nth-of-type(4) {
						border: none;
						display: flex;
						justify-content: flex-end;
						font-size: 14 * $width;
						height: 10 * $width;
						margin-top: 20 * $width;
					}
				}

				.list_2 {
					li:nth-of-type(2) {
						input {
							width: 170 * $width;
						}

						button {
							width: 90 * $width;
							height: 28 * $width;
							border-radius: 14 * $width;
							background-color: #e93323;
							color: #fff;
							border: none;
						}
					}
				}
			}

			.bottom {
				font-size: 13 * $width;

				.li1 {
					margin: 15 * $width 0 20 * $width 0;

					label {
						display: flex;
						align-items: center;

						span:nth-of-type(2n) {
							color: #e93323;
						}

						input {
							margin: 0 5 * $width;
						}
					}

				}

				.li2 {
					button {
						width: 100%;
						height: 40 * $width;
						border-radius: 20 * $width;
						border: none;
						background-color: #f35547;
						background-image: linear-gradient(90deg, #f35547 20%, #fe8c3c 80%);
						color: #fff;
						font-size: 18 * $width;
						font-weight: 600;
					}
				}

				.li3 {
					margin: 20 * $width 0;
					text-align: center;

					a {
						color: #e93323;
					}
				}

				.li4 {
					text-align: center;
					margin-bottom: 20 * $width;

					a {
						color: #e93323;
					}
				}
			}
		}


	}
</style>
